<template>
  <div class="charts">
    <!-- vue-echarts提供全局组件 -->
    <v-chart :option="getOption()"></v-chart>
  </div>
</template>

<script setup lang="ts">
//ehcarts配置项
const getOption = () => {
  return {
    //x轴
    xAxis: {
      //x轴上均匀分布
      type: "category",
      show: false, //隐藏x
    },
    yAxis: {
      show: false, //隐藏y
    },
    series: {
      type: "bar",
      //每个柱状图颜色
      colorBy: "data",
      data: props.data,
      //显示数值
      label: {
        show: false,
        position: "insideTop",
        color: "white",
      },
      //延迟动画时间
      animationDelay: function (idx) {
        // 越往后的数据延迟越大
        return idx * 100;
      },
    },
    grid: {
      left: 0,
      top: 0,
      right: 0,
      bottom: 0,
      show: true,
      //图标底层的颜色
      backgroundColor: {
        type: "linear",
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: "yellow", // 0% 处的颜色
          },
          {
            offset: 1,
            color: "skyblue", // 100% 处的颜色
          },
        ],
        global: false, // 缺省为 false
      },
    },
    //提示组件
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
      },
      position: function (point, params, dom, rect, size) {
        // 固定在顶部
        return [point[0], "5%"];
      },
    },
  };
};

//接受父组件传递过来props
let props = defineProps(["data"]);
</script>

<style scoped>
.charts {
  width: 100%;
  height: 100%;
}
</style>